<template>
  <Title>
    <template v-slot:head>
      <i @click="changeMenuVisible(true)" class="el-icon-menu"></i>
    </template>
    <div>{{ title }}</div>
  </Title>
  <Menu v-model:visible="menuVisible" />
  <router-view />
</template>

<script lang="ts">
import { Ref, ref, watch } from "vue";

import Menu from "/@/components/Menu.vue";
import Title from "/@/components/Title.vue";
import { useRoute } from "vue-router";
export default {
  name: "App",
  components: { Menu, Title },
  setup() {
    let menuVisible: Ref = ref(true);
    function changeMenuVisible(value: Boolean) {
      menuVisible.value = value;
    }

    const route = useRoute();
    let title = ref(route.meta.title);
    watch(route, (n, o) => {
      title.value = route.meta.title;
    });

    return {
      menuVisible,
      changeMenuVisible,
      title,
    };
  },
};
</script>